{% extends 'layout.html' %}

{% block title %}لوحة التحكم الرئيسية{% endblock title %}

{% block head %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
{% endblock head %}

{% block content %}
<div class="section-header mb-4">
    <div class="section-header-content">
        <div class="section-icon-wrap">
            <i class="bi bi-shield-fill"></i>
        </div>
        <h1 class="display-5 fw-bold">قسم التدريب</h1>
    </div>
</div>

<div class="container-fluid px-4">
    <div class="row g-4">
        <!-- العمود الأيمن: البطاقات -->
        <div class="col-md-5 order-md-1">
            <!-- بطاقات مرتبة بشكل عمودي فوق بعضها بوضوح -->
            <div class="d-flex flex-column">
                <!-- بطاقة الفصائل -->
                <div class="card mb-3 border-0 shadow-sm w-100" style="border-radius:16px;overflow:hidden;">
                    <div class="card-body py-3 px-4">
                        <div class="d-flex align-items-center">
                            <div class="rounded-circle bg-primary bg-opacity-10 p-3 me-3">
                                <i class="bi bi-people-fill text-primary fs-5"></i>
                            </div>
                            <div>
                                <h5 class="card-title mb-1 fs-5 fw-bold">الفصائل</h5>
                                <p class="card-text mb-2 text-muted">عرض وتسجيل الحضور والغياب</p>
                            </div>
                            <a href="{{ url_for('view_factions') }}" class="btn btn-primary ms-auto rounded-pill px-3">
                                <i class="bi bi-arrow-left-short me-1"></i><span>إدارة</span>
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- بطاقة الإنذارات -->
                <div class="card mb-3 border-0 shadow-sm w-100" style="border-radius:16px;overflow:hidden;">
                    <div class="card-body py-3 px-4">
                        <div class="d-flex align-items-center">
                            <div class="rounded-circle bg-danger bg-opacity-10 p-3 me-3">
                                <i class="bi bi-exclamation-triangle-fill text-danger fs-5"></i>
                            </div>
                            <div>
                                <h5 class="card-title mb-1 fs-5 fw-bold">الإنذارات</h5>
                                <p class="card-text mb-0 text-muted">عدد الحاصلين على إنذار: <span class="badge bg-danger rounded-pill fw-bold">{{ warnings_count }}</span></p>
                            </div>
                            <a href="{{ url_for('warnings_list') }}" class="btn btn-warning ms-auto rounded-pill px-3">
                                <i class="bi bi-arrow-left-short me-1"></i><span>عرض</span>
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- بطاقة جميع ما يخص الدورة -->
                <div class="card mb-3 border-0 shadow-sm w-100" style="border-radius:16px;overflow:hidden;">
                    <div class="card-body py-3 px-4">
                        <div class="d-flex align-items-center">
                            <div class="rounded-circle bg-info bg-opacity-10 p-3 me-3">
                                <i class="bi bi-person-badge text-info fs-5"></i>
                            </div>
                            <div>
                                <h5 class="card-title mb-0 fs-5 fw-bold">جميع ما يخص الدورة</h5>
                            </div>
                            <a href="{{ url_for('course_information_list') }}" class="btn btn-info ms-auto rounded-pill px-3">
                                <i class="bi bi-arrow-left-short me-1"></i><span>عرض</span>
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- بطاقة المفصولين -->
                <div class="card mb-3 border-0 shadow-sm w-100" style="border-radius:16px;overflow:hidden;">
                    <div class="card-body py-3 px-4">
                        <div class="d-flex align-items-center">
                            <div class="rounded-circle bg-dark bg-opacity-10 p-3 me-3">
                                <i class="bi bi-person-dash-fill text-dark fs-5"></i>
                            </div>
                            <div>
                                <h5 class="card-title mb-1 fs-5 fw-bold">المفصولين</h5>
                                <p class="card-text mb-0 text-muted">عدد المفصولين: <span class="badge bg-dark rounded-pill fw-bold">{{ dismissed_count }}</span></p>
                            </div>
                            <a href="{{ url_for('dismissed_list') }}" class="btn btn-secondary ms-auto rounded-pill px-3">
                                <i class="bi bi-arrow-left-short me-1"></i><span>عرض</span>
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- بطاقة متابعة الدورة -->
                <div class="card mb-3 border-0 shadow-sm w-100" style="border-radius:16px;overflow:hidden;">
                    <div class="card-body py-3 px-4">
                        <div class="d-flex align-items-center">
                            <div class="rounded-circle p-3 me-3" style="background-color:rgba(32,201,151,0.1);">
                                <i class="bi bi-journal-check fs-5" style="color:#20c997;"></i>
                            </div>
                            <div>
                                <h5 class="card-title mb-1 fs-5 fw-bold">متابعة الدورة</h5>
                                <p class="card-text mb-0 text-muted">متابعة تقدم الدورة وتقييم الأداء</p>
                            </div>
                            <a href="{{ url_for('course_progress') }}" class="btn ms-auto rounded-pill px-3" style="background-color:#20c997;color:white;">
                                <i class="bi bi-arrow-left-short me-1"></i><span>عرض</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- العمود الأيسر: اليومية -->
        <div class="col-md-7 order-md-2">
            <!-- اليومية -->
            <div class="card mb-4 border-0 shadow-sm h-100" style="border-radius:16px;overflow:hidden;">
                <div class="card-header bg-transparent border-0 pt-3">
                    <div class="d-flex align-items-center">
                        <div class="section-icon-wrap" style="width: 45px; height: 45px; font-size: 20px; margin-left: 15px;">
                            <i class="bi bi-calendar-check-fill"></i>
                        </div>
                        <h5 class="card-title mb-0 fs-5 fw-bold" style="color: #1453A5;">اليومية</h5>
                    </div>
                </div>
                <div class="card-body pt-0 px-4">
                    <div class="input-group input-group-sm mb-3 mt-2">
                        <span class="input-group-text bg-light border-light"><i class="bi bi-calendar3"></i></span>
                        <button id="prevDayBtn" class="btn btn-outline-secondary btn-sm bg-light border-light" title="اليوم السابق"><i class="bi bi-chevron-right"></i></button>
                        <input type="date" id="datePicker" class="form-control form-control-sm bg-light border-light">
                        <button id="nextDayBtn" class="btn btn-outline-secondary btn-sm bg-light border-light" title="اليوم التالي"><i class="bi bi-chevron-left"></i></button>
                        <button id="goToDateBtn" class="btn btn-outline-secondary btn-sm bg-light border-light"><i class="bi bi-search"></i></button>
                    </div>
                    <div class="row row-cols-2 g-3 mb-3">
                        <div class="col"><div class="p-3 rounded bg-light"><small class="text-muted d-block mb-1">الإجمالي المسجل</small><span class="fw-bold fs-5">{{ absolute_total_count }}</span></div></div>
                        <div class="col"><div class="p-3 rounded bg-light"><small class="text-muted d-block mb-1">الإجمالي النشط</small><span class="fw-bold fs-5">{{ daily_summary.total_enrolled }}</span></div></div>
                        <div class="col"><div class="p-3 rounded bg-success bg-opacity-10"><small class="text-muted d-block mb-1">الحضور</small><div class="d-flex justify-content-between align-items-center"><span class="fw-bold text-success fs-5">{{ daily_summary.present }}</span><span class="badge bg-success rounded-pill fs-6">{{ daily_summary.present }}</span></div></div></div>
                        <div class="col"><div class="p-3 rounded bg-danger bg-opacity-10"><small class="text-muted d-block mb-1">الغياب</small><div class="d-flex justify-content-between align-items-center"><span class="fw-bold text-danger fs-5">{{ daily_summary.absent }}</span><span class="badge bg-danger rounded-pill fs-6">{{ daily_summary.absent }}</span></div></div></div>
                        <div class="col"><div class="p-3 rounded bg-warning bg-opacity-10"><small class="text-muted d-block mb-1">الطبية</small><div class="d-flex justify-content-between align-items-center"><span class="fw-bold text-warning fs-5">{{ daily_summary.medical }}</span><span class="badge bg-warning rounded-pill fs-6">{{ daily_summary.medical }}</span></div></div></div>
                        <div class="col"><div class="p-3 rounded bg-info bg-opacity-10"><small class="text-muted d-block mb-1">الرخصة</small><div class="d-flex justify-content-between align-items-center"><span class="fw-bold text-info fs-5">{{ daily_summary.leave }}</span><span class="badge bg-info rounded-pill fs-6">{{ daily_summary.leave }}</span></div></div></div>
                    </div>
                    <div class="d-flex justify-content-end"><a href="{{ url_for('daily_details', date_iso=current_date.isoformat()) }}" class="btn btn-success rounded-pill px-3"><i class="bi bi-calendar-day me-1"></i>عرض اليومية</a></div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // تعيين التاريخ الحالي في حقل اختيار التاريخ
        const datePicker = document.getElementById('datePicker');
        const today = new Date();
        const formattedDate = today.toISOString().split('T')[0]; // صيغة YYYY-MM-DD
        datePicker.value = formattedDate;
        
        // إضافة مستمع حدث للزر للانتقال إلى التاريخ المحدد
        const goToDateBtn = document.getElementById('goToDateBtn');
        goToDateBtn.addEventListener('click', function() {
            const selectedDate = datePicker.value;
            if (selectedDate) {
                window.location.href = "{{ url_for('daily_details', date_iso='') }}" + selectedDate;
            }
        });
        
        // الانتقال المباشر عند تغيير التاريخ من التقويم
        datePicker.addEventListener('change', function() {
            const selectedDate = this.value;
            if (selectedDate) {
                window.location.href = "{{ url_for('daily_details', date_iso='') }}" + selectedDate;
            }
        });
        
        // زر الانتقال لليوم السابق
        const prevDayBtn = document.getElementById('prevDayBtn');
        prevDayBtn.addEventListener('click', function() {
            const currentDate = new Date(datePicker.value);
            currentDate.setDate(currentDate.getDate() - 1);
            const prevDate = currentDate.toISOString().split('T')[0];
            datePicker.value = prevDate;
            window.location.href = "{{ url_for('daily_details', date_iso='') }}" + prevDate;
        });
        
        // زر الانتقال لليوم التالي
        const nextDayBtn = document.getElementById('nextDayBtn');
        nextDayBtn.addEventListener('click', function() {
            const currentDate = new Date(datePicker.value);
            currentDate.setDate(currentDate.getDate() + 1);
            const nextDate = currentDate.toISOString().split('T')[0];
            datePicker.value = nextDate;
            window.location.href = "{{ url_for('daily_details', date_iso='') }}" + nextDate;
        });
        
        // السماح بالضغط على مفتاح Enter للانتقال إلى التاريخ
        datePicker.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                goToDateBtn.click();
            }
        });
    });
</script>
{% endblock scripts %}